import { Component, OnInit } from '@angular/core';

@Component({
    selector: "equip-load-rate",
    styleUrls: ['./components.less'],
    template: `
            <div class='loadRateContainer'>
                 <div echarts [options]="option" class='rate-echart'></div>   
            </div>
    `
})

export class LoadRateComponent implements OnInit {
    option = {
        color: ['#c23531'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '8%',
            right: '6%',
            bottom: '2%',
            containLabel: true,
            borderColor: '#fff',
            borderWidth: 1
        },
        xAxis: [
            {
                type: 'category',
                data: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '##434454'
                    }
                },
                axisLabel: {
                    color: '#ffffff'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#363742'
                    }
                },
                axisLabel: {

                    color: '#ffffff'

                }
            }
        ],
        series: [
            {
                name: '报警统计',
                type: 'bar',
                barWidth: '30%',
                data: [38, 32, 45, 54, 23, 70, 69]
            }
        ]
    };
    ngOnInit(): void {

    }
}